<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>投票中心 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 搜索和筛选区域 */
    .search-filter-container {
      background-color: white;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 57px;
      z-index: 90;
    }
    
    /* 搜索框 */
    .search-bar {
      position: relative;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f8f9fa;
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .clear-search {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      cursor: pointer;
      display: none;
    }
    
    .clear-search.active {
      display: block;
    }
    
    /* 筛选条件切换器 */
    .filter-toggle {
      display: flex;
      border-bottom: 1px solid #eee;
    }
    
    .filter-tab {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      position: relative;
      cursor: pointer;
    }
    
    .filter-tab.active {
      color: #3498db;
    }
    
    .filter-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: #3498db;
    }
    
    /* 筛选内容区域 */
    .filter-content {
      padding: 15px;
      display: none;
      max-height: 300px;
      overflow-y: auto;
    }
    
    .filter-content.active {
      display: block;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .filter-section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #333;
    }
    
    /* 标签式筛选选项 */
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .filter-tag {
      padding: 6px 14px;
      background-color: #f5f5f5;
      border-radius: 15px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .filter-tag.active {
      background-color: #3498db;
      color: white;
    }
    
    /* 复选框筛选选项 */
    .filter-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
    
    .custom-checkbox {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .custom-checkbox.checked {
      background-color: #3498db;
      border-color: #3498db;
      color: white;
    }
    
    /* 滑块筛选 */
    .slider-container {
      padding: 10px 0;
    }
    
    .slider-info {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .custom-slider {
      width: 100%;
      height: 4px;
      background-color: #eee;
      border-radius: 2px;
      position: relative;
    }
    
    .slider-thumb {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3498db;
      cursor: pointer;
    }
    
    /* 筛选操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
    }
    
    .filter-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
    }
    
    .reset-btn {
      background-color: #f5f5f5;
      color: #666;
      border: none;
    }
    
    .apply-btn {
      background-color: #3498db;
      color: white;
      border: none;
    }
    
    /* 活跃筛选标签 */
    .active-filters {
      padding: 8px 15px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      display: none;
    }
    
    .active-filters.active {
      display: flex;
    }
    
    .active-filter-tag {
      background-color: #e8f4fd;
      color: #3498db;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .remove-filter {
      cursor: pointer;
      font-size: 14px;
    }
    
    .clear-all {
      color: #666;
      font-size: 13px;
      margin-left: auto;
      cursor: pointer;
    }
    
    /* 投票列表容器 */
    .votes-container {
      padding: 10px;
    }
    
    /* 投票项通用样式 */
    .vote-item {
      background-color: white;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    .vote-header {
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .vote-creator {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .creator-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .creator-info {
      flex: 1;
    }
    
    .creator-name {
      font-size: 15px;
      font-weight: 500;
    }
    
    .vote-time {
      font-size: 12px;
      color: #999;
    }
    
    .vote-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .vote-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    
    .vote-meta {
      display: flex;
      font-size: 13px;
      color: #999;
    }
    
    .vote-meta span {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
    
    .vote-meta i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    /* 投票选项容器 */
    .vote-options {
      padding: 10px 15px 15px;
    }
    
    .vote-type {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
      padding-left: 5px;
    }
    
    /* 投票选项样式 */
    .option-text {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px 15px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    
    .option-single-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      overflow: hidden;
      cursor: pointer;
    }
    
    .option-single-img img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .option-multi-img {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 12px 15px;
    }
    
    .multi-img-container {
      display: flex;
      gap: 5px;
      margin-bottom: 8px;
      overflow-x: auto;
    }
    
    .multi-img-container img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    /* 投票进度条 */
    .option-progress {
      margin-top: 8px;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 5px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: #3498db;
      border-radius: 4px;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
    }
    
    /* 投票按钮 */
    .vote-btn {
      width: 100%;
      padding: 10px 0;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      margin-top: 5px;
    }
    
    .vote-btn.voted {
      background-color: #2ecc71;
    }
    
    /* 投票操作栏 */
    .vote-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 10px 15px;
      border-top: 1px solid #f0f0f0;
    }
    
    .vote-action {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 投票选择框样式 */
    .option-checkbox, .option-radio {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .option-checkbox {
      border-radius: 4px;
    }
    
    .option-checkbox.checked::after, .option-radio.checked::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      font-size: 12px;
      color: white;
    }
    
    .option-checkbox.checked, .option-radio.checked {
      background-color: #3498db;
      border-color: #3498db;
    }
    
    /* 空状态 */
    .empty-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 20px;
      text-align: center;
    }
    
    .empty-state.active {
      display: flex;
    }
    
    .empty-icon {
      font-size: 60px;
      color: #ddd;
      margin-bottom: 20px;
    }
    
    .empty-text {
      font-size: 16px;
      color: #999;
      margin-bottom: 15px;
    }
    
    .empty-action {
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">投票中心</h1>
    <button class="btn btn-link p-0 nav-btn" id="createVoteBtn">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  
  <!-- 搜索和筛选容器 -->
  <div class="search-filter-container">
    <!-- 搜索框 -->
    <div class="search-bar">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索投票话题...">
      <i class="fa fa-times clear-search"></i>
    </div>
    
    <!-- 筛选条件切换器 -->
    <div class="filter-toggle">
      <div class="filter-tab active" data-target="type-filter">类型</div>
      <div class="filter-tab" data-target="status-filter">状态</div>
      <div class="filter-tab" data-target="time-filter">时间</div>
      <div class="filter-tab" data-target="popularity-filter">热度</div>
    </div>
    
    <!-- 类型筛选 -->
    <div class="filter-content active" id="type-filter">
      <div class="filter-section">
        <div class="filter-section-title">投票形式</div>
        <div class="filter-tags">
          <div class="filter-tag active" data-filter="type" data-value="all">全部形式</div>
          <div class="filter-tag" data-filter="type" data-value="text">纯文字</div>
          <div class="filter-tag" data-filter="type" data-value="single-img">单图</div>
          <div class="filter-tag" data-filter="type" data-value="multi-img">多图</div>
        </div>
      </div>
      
      <div class="filter-section">
        <div class="filter-section-title">投票类型</div>
        <div class="filter-checkboxes">
          <div class="checkbox-item">
            <div class="custom-checkbox" data-filter="vote-type" data-value="single"></div>
            <span>单选投票</span>
          </div>
          <div class="checkbox-item">
            <div class="custom-checkbox" data-filter="vote-type" data-value="multiple"></div>
            <span>多选投票</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 状态筛选 -->
    <div class="filter-content" id="status-filter">
      <div class="filter-section">
        <div class="filter-section-title">参与状态</div>
        <div class="filter-tags">
          <div class="filter-tag active" data-filter="participation" data-value="all">全部状态</div>
          <div class="filter-tag" data-filter="participation" data-value="joined">已参与</div>
          <div class="filter-tag" data-filter="participation" data-value="not-joined">未参与</div>
        </div>
      </div>
      
      <div class="filter-section">
        <div class="filter-section-title">投票状态</div>
        <div class="filter-tags">
          <div class="filter-tag active" data-filter="status" data-value="all">全部状态</div>
          <div class="filter-tag" data-filter="status" data-value="ongoing">进行中</div>
          <div class="filter-tag" data-filter="status" data-value="ended">已结束</div>
        </div>
      </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="filter-content" id="time-filter">
      <div class="filter-section">
        <div class="filter-section-title">发布时间</div>
        <div class="filter-tags">
          <div class="filter-tag active" data-filter="publish-time" data-value="all">全部时间</div>
          <div class="filter-tag" data-filter="publish-time" data-value="today">今天</div>
          <div class="filter-tag" data-filter="publish-time" data-value="week">本周</div>
          <div class="filter-tag" data-filter="publish-time" data-value="month">本月</div>
          <div class="filter-tag" data-filter="publish-time" data-value="year">今年</div>
        </div>
      </div>
      
      <div class="filter-section">
        <div class="filter-section-title">剩余时间</div>
        <div class="slider-container">
          <div class="slider-info">
            <span>即将结束</span>
            <span>长期有效</span>
          </div>
          <div class="custom-slider">
            <div class="slider-thumb" style="left: 30%;"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 热度筛选 -->
    <div class="filter-content" id="popularity-filter">
      <div class="filter-section">
        <div class="filter-section-title">排序方式</div>
        <div class="filter-tags">
          <div class="filter-tag active" data-filter="sort" data-value="recommend">推荐排序</div>
          <div class="filter-tag" data-filter="sort" data-value="hot">热度优先</div>
          <div class="filter-tag" data-filter="sort" data-value="newest">最新发布</div>
          <div class="filter-tag" data-filter="sort" data-value="participants">参与人数</div>
        </div>
      </div>
      
      <div class="filter-section">
        <div class="filter-section-title">参与人数</div>
        <div class="filter-checkboxes">
          <div class="checkbox-item">
            <div class="custom-checkbox" data-filter="participant-count" data-value="0-100"></div>
            <span>100人以内</span>
          </div>
          <div class="checkbox-item">
            <div class="custom-checkbox" data-filter="participant-count" data-value="100-500"></div>
            <span>100-500人</span>
          </div>
          <div class="checkbox-item">
            <div class="custom-checkbox" data-filter="participant-count" data-value="500+"></div>
            <span>500人以上</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="filter-btn reset-btn">重置</button>
      <button class="filter-btn apply-btn">应用筛选</button>
    </div>
  </div>
  
  <!-- 活跃筛选标签 -->
  <div class="active-filters">
    <!-- 动态生成的活跃筛选标签 -->
  </div>
  
  <!-- 投票列表 -->
  <div class="votes-container">
    <!-- 1. 无图单选投票 -->
    <div class="vote-item" data-type="text" data-vote-type="single" data-status="ongoing" data-publish-time="week" data-participants="248" data-participation="not-joined">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">音乐爱好者</div>
            <div class="vote-time">2小时前</div>
          </div>
        </div>
        
        <div class="vote-title">你最喜欢的音乐节类型是？</div>
        
        <div class="vote-desc">
          随着夏季到来，各种音乐节开始增多，想了解大家最喜欢的音乐节类型，后续可能组织相应活动哦~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 248人参与</span>
          <span><i class="fa fa-clock-o"></i> 剩余3天</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">单选投票</div>
        
        <div class="option-text">
          <div class="option-label">摇滚音乐节</div>
          <div class="option-desc">以摇滚音乐为主的现场演出</div>
          <div class="option-radio"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 45%;"></div>
            </div>
            <div class="progress-text">
              <span>45%</span>
              <span>112票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn">提交投票</button>
      </div>
    </div>
    
    <!-- 2. 单图多选投票 -->
    <div class="vote-item" data-type="single-img" data-vote-type="multiple" data-status="ongoing" data-publish-time="week" data-participants="86" data-participation="not-joined">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">城市美食家</div>
            <div class="vote-time">昨天 15:30</div>
          </div>
        </div>
        
        <div class="vote-title">周末聚餐，你推荐哪家餐厅？</div>
        
        <div class="vote-desc">
          公司团队周末聚餐，预算人均150左右，大家帮忙推荐一下，可多选~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 86人参与</span>
          <span><i class="fa fa-clock-o"></i> 剩余1天</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">多选投票（最多选3项）</div>
        
        <div class="option-single-img">
          <img src="https://picsum.photos/800/400?random=10" alt="餐厅图片">
          <div class="option-info">
            <div class="option-label">青竹湘菜馆</div>
            <div class="option-desc">正宗湖南菜，招牌剁椒鱼头</div>
            <div class="option-progress">
              <div class="progress-bar-container">
                <div class="progress-bar" style="width: 42%;"></div>
              </div>
              <div class="progress-text">
                <span>42%</span>
                <span>36票</span>
              </div>
            </div>
          </div>
        </div>
        
        <button class="vote-btn">提交投票</button>
      </div>
    </div>
    
    <!-- 3. 多图单选投票 -->
    <div class="vote-item" data-type="multi-img" data-vote-type="single" data-status="ended" data-publish-time="month" data-participants="325" data-participation="joined">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">旅行摄影师</div>
            <div class="vote-time">3天前</div>
          </div>
        </div>
        
        <div class="vote-title">哪组照片更适合作为旅行杂志封面？</div>
        
        <div class="vote-desc">
          最近拍摄的几组旅行照片，想选一组投稿给旅行杂志，大家帮忙选选看~
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 325人参与</span>
          <span><i class="fa fa-clock-o"></i> 已结束</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">单选投票（已结束）</div>
        
        <div class="option-multi-img">
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=20" alt="照片1">
            <img src="https://picsum.photos/300/300?random=21" alt="照片2">
            <img src="https://picsum.photos/300/300?random=22" alt="照片3">
          </div>
          <div class="option-label">山川湖海系列</div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 58%;"></div>
            </div>
            <div class="progress-text">
              <span>58%</span>
              <span>188票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn voted" disabled>已投票</button>
      </div>
    </div>
    
    <!-- 4. 无图多选投票 -->
    <div class="vote-item" data-type="text" data-vote-type="multiple" data-status="ended" data-publish-time="month" data-participants="63" data-participation="joined">
      <div class="vote-header">
        <div class="vote-creator">
          <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="creator-avatar">
          <div class="creator-info">
            <div class="creator-name">读书会组织者</div>
            <div class="vote-time">4天前</div>
          </div>
        </div>
        
        <div class="vote-title">下个月读书会，大家想读哪些类型的书？</div>
        
        <div class="vote-desc">
          为下个月的读书会做准备，大家可以多选几种感兴趣的类型，我们会综合考虑选择最终书目。
        </div>
        
        <div class="vote-meta">
          <span><i class="fa fa-users"></i> 63人参与</span>
          <span><i class="fa fa-clock-o"></i> 已结束</span>
        </div>
      </div>
      
      <div class="vote-options">
        <div class="vote-type">多选投票（已结束）</div>
        
        <div class="option-text">
          <div class="option-label">科幻小说</div>
          <div class="option-desc">包含科幻元素的小说作品</div>
          <div class="option-checkbox checked"></div>
          <div class="option-progress">
            <div class="progress-bar-container">
              <div class="progress-bar" style="width: 65%;"></div>
            </div>
            <div class="progress-text">
              <span>65%</span>
              <span>41票</span>
            </div>
          </div>
        </div>
        
        <button class="vote-btn voted" disabled>已投票</button>
      </div>
    </div>
  </div>
  
  <!-- 空状态 -->
  <div class="empty-state">
    <i class="fa fa-search empty-icon"></i>
    <div class="empty-text">没有找到符合条件的投票</div>
    <div class="empty-action" onclick="clearAllFilters()">清除筛选条件</div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-calendar nav-icon"></i>
      <span>活动</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-bar-chart nav-icon"></i>
      <span>投票</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 存储当前筛选条件
    const currentFilters = {
      type: 'all',
      'vote-type': [],
      participation: 'all',
      status: 'all',
      'publish-time': 'all',
      sort: 'recommend',
      'participant-count': []
    };
    
    // 筛选标签切换
    document.querySelectorAll('.filter-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 切换标签激活状态
        document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 切换内容区域
        const target = this.getAttribute('data-target');
        document.querySelectorAll('.filter-content').forEach(content => {
          content.classList.remove('active');
        });
        document.getElementById(target).classList.add('active');
      });
    });
    
    // 标签式筛选选项点击
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', function() {
        const filterType = this.getAttribute('data-filter');
        const filterValue = this.getAttribute('data-value');
        
        // 如果是单选类型的筛选（非多选）
        if (!['vote-type', 'participant-count'].includes(filterType)) {
          // 清除同类型其他选项的激活状态
          document.querySelectorAll(`.filter-tag[data-filter="${filterType}"]`).forEach(t => {
            t.classList.remove('active');
          });
        }
        
        // 切换当前标签状态
        this.classList.toggle('active');
        
        // 更新筛选条件
        if (filterType === 'vote-type' || filterType === 'participant-count') {
          // 多选类型
          if (this.classList.contains('active')) {
            if (!currentFilters[filterType].includes(filterValue)) {
              currentFilters[filterType].push(filterValue);
            }
          } else {
            currentFilters[filterType] = currentFilters[filterType].filter(v => v !== filterValue);
          }
        } else {
          // 单选类型
          currentFilters[filterType] = filterValue;
        }
      });
    });
    
    // 复选框筛选选项点击
    document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
      checkbox.addEventListener('click', function() {
        const filterType = this.getAttribute('data-filter');
        const filterValue = this.getAttribute('data-value');
        
        // 切换复选框状态
        this.classList.toggle('checked');
        
        // 更新筛选条件
        if (this.classList.contains('checked')) {
          if (!currentFilters[filterType].includes(filterValue)) {
            currentFilters[filterType].push(filterValue);
          }
        } else {
          currentFilters[filterType] = currentFilters[filterType].filter(v => v !== filterValue);
        }
      });
    });
    
    // 应用筛选按钮点击
    document.querySelector('.apply-btn').addEventListener('click', applyFilters);
    
    // 重置筛选按钮点击
    document.querySelector('.reset-btn').addEventListener('click', resetFilters);
    
    // 清除搜索按钮
    const clearSearchBtn = document.querySelector('.clear-search');
    const searchInput = document.querySelector('.search-input');
    
    searchInput.addEventListener('input', function() {
      if (this.value.trim() !== '') {
        clearSearchBtn.classList.add('active');
      } else {
        clearSearchBtn.classList.remove('active');
      }
      // 实时搜索
      applyFilters();
    });
    
    clearSearchBtn.addEventListener('click', function() {
      searchInput.value = '';
      this.classList.remove('active');
      applyFilters();
    });
    
    // 应用筛选条件
    function applyFilters() {
      const searchTerm = searchInput.value.trim().toLowerCase();
      const voteItems = document.querySelectorAll('.vote-item');
      let visibleCount = 0;
      
      // 更新活跃筛选标签
      updateActiveFilterTags();
      
      // 遍历所有投票项
      voteItems.forEach(item => {
        let isVisible = true;
        
        // 类型筛选
        if (currentFilters.type !== 'all' && item.getAttribute('data-type') !== currentFilters.type) {
          isVisible = false;
        }
        
        // 投票类型筛选
        if (currentFilters['vote-type'].length > 0) {
          const itemVoteType = item.getAttribute('data-vote-type');
          if (!currentFilters['vote-type'].includes(itemVoteType)) {
            isVisible = false;
          }
        }
        
        // 参与状态筛选
        if (currentFilters.participation !== 'all' && 
            item.getAttribute('data-participation') !== currentFilters.participation) {
          isVisible = false;
        }
        
        // 投票状态筛选
        if (currentFilters.status !== 'all' && 
            item.getAttribute('data-status') !== currentFilters.status) {
          isVisible = false;
        }
        
        // 发布时间筛选
        if (currentFilters['publish-time'] !== 'all' && 
            item.getAttribute('data-publish-time') !== currentFilters['publish-time']) {
          isVisible = false;
        }
        
        // 参与人数筛选
        if (currentFilters['participant-count'].length > 0) {
          const participants = parseInt(item.getAttribute('data-participants'));
          let countMatch = false;
          
          currentFilters['participant-count'].forEach(range => {
            if (range === '0-100' && participants <= 100) {
              countMatch = true;
            } else if (range === '100-500' && participants > 100 && participants <= 500) {
              countMatch = true;
            } else if (range === '500+' && participants > 500) {
              countMatch = true;
            }
          });
          
          if (!countMatch) {
            isVisible = false;
          }
        }
        
        // 搜索词筛选
        if (searchTerm && !item.querySelector('.vote-title').textContent.toLowerCase().includes(searchTerm) &&
            !item.querySelector('.vote-desc').textContent.toLowerCase().includes(searchTerm)) {
          isVisible = false;
        }
        
        // 显示或隐藏投票项
        if (isVisible) {
          item.style.display = 'block';
          visibleCount++;
        } else {
          item.style.display = 'none';
        }
      });
      
      // 处理空状态
      const emptyState = document.querySelector('.empty-state');
      if (visibleCount === 0) {
        emptyState.classList.add('active');
      } else {
        emptyState.classList.remove('active');
      }
      
      // 按排序方式排序
      sortVoteItems();
    }
    
    // 排序投票项
    function sortVoteItems() {
      const container = document.querySelector('.votes-container');
      const items = Array.from(container.querySelectorAll('.vote-item:not([style*="display: none"])'));
      
      // 根据当前排序方式排序
      switch(currentFilters.sort) {
        case 'hot':
          // 按参与人数降序
          items.sort((a, b) => {
            return parseInt(b.getAttribute('data-participants')) - parseInt(a.getAttribute('data-participants'));
          });
          break;
        case 'newest':
          // 按发布时间排序（假设时间越近越新）
          items.sort((a, b) => {
            const timeMap = { 'today': 4, 'week': 3, 'month': 2, 'year': 1 };
            return timeMap[b.getAttribute('data-publish-time')] - timeMap[a.getAttribute('data-publish-time')];
          });
          break;
        case 'participants':
          // 按参与人数升序
          items.sort((a, b) => {
            return parseInt(a.getAttribute('data-participants')) - parseInt(b.getAttribute('data-participants'));
          });
          break;
        case 'recommend':
        default:
          // 推荐排序（保持原顺序）
          break;
      }
      
      // 重新排列DOM
      items.forEach(item => container.appendChild(item));
    }
    
    // 更新活跃筛选标签
    function updateActiveFilterTags() {
      const container = document.querySelector('.active-filters');
      container.innerHTML = '';
      
      let hasActiveFilters = false;
      
      // 类型筛选标签
      if (currentFilters.type !== 'all') {
        addActiveFilterTag(container, '类型', currentFilters.type, 'type', 'all');
        hasActiveFilters = true;
      }
      
      // 投票类型筛选标签
      currentFilters['vote-type'].forEach(type => {
        const typeText = type === 'single' ? '单选' : '多选';
        addActiveFilterTag(container, '投票类型', typeText, 'vote-type', type);
        hasActiveFilters = true;
      });
      
      // 参与状态筛选标签
      if (currentFilters.participation !== 'all') {
        const text = currentFilters.participation === 'joined' ? '已参与' : '未参与';
        addActiveFilterTag(container, '参与状态', text, 'participation', 'all');
        hasActiveFilters = true;
      }
      
      // 投票状态筛选标签
      if (currentFilters.status !== 'all') {
        const text = currentFilters.status === 'ongoing' ? '进行中' : '已结束';
        addActiveFilterTag(container, '投票状态', text, 'status', 'all');
        hasActiveFilters = true;
      }
      
      // 发布时间筛选标签
      if (currentFilters['publish-time'] !== 'all') {
        const timeTextMap = { 'today': '今天', 'week': '本周', 'month': '本月', 'year': '今年' };
        addActiveFilterTag(container, '发布时间', timeTextMap[currentFilters['publish-time']], 'publish-time', 'all');
        hasActiveFilters = true;
      }
      
      // 排序方式标签
      if (currentFilters.sort !== 'recommend') {
        const sortTextMap = { 'hot': '热度优先', 'newest': '最新发布', 'participants': '参与人数' };
        addActiveFilterTag(container, '排序', sortTextMap[currentFilters.sort], 'sort', 'recommend');
        hasActiveFilters = true;
      }
      
      // 参与人数筛选标签
      currentFilters['participant-count'].forEach(range => {
        addActiveFilterTag(container, '参与人数', range, 'participant-count', range);
        hasActiveFilters = true;
      });
      
      // 搜索词标签
      if (searchInput.value.trim() !== '') {
        const tag = document.createElement('div');
        tag.className = 'active-filter-tag';
        tag.innerHTML = `<i class="fa fa-search"></i> "${searchInput.value}" <i class="fa fa-times remove-filter" data-filter="search"></i>`;
        container.appendChild(tag);
        
        // 添加删除事件
        tag.querySelector('.remove-filter').addEventListener('click', function() {
          searchInput.value = '';
          clearSearchBtn.classList.remove('active');
          applyFilters();
        });
        
        hasActiveFilters = true;
      }
      
      // 添加清除全部按钮
      if (hasActiveFilters) {
        const clearAll = document.createElement('div');
        clearAll.className = 'clear-all';
        clearAll.innerHTML = '<i class="fa fa-times"></i> 清除全部';
        clearAll.addEventListener('click', clearAllFilters);
        container.appendChild(clearAll);
      }
      
      // 显示或隐藏活跃筛选标签容器
      if (hasActiveFilters) {
        container.classList.add('active');
      } else {
        container.classList.remove('active');
      }
    }
    
    // 添加活跃筛选标签
    function addActiveFilterTag(container, label, text, filterType, resetValue) {
      const tag = document.createElement('div');
      tag.className = 'active-filter-tag';
      tag.innerHTML = `${label}: ${text} <i class="fa fa-times remove-filter" data-filter="${filterType}" data-reset="${resetValue}"></i>`;
      container.appendChild(tag);
      
      // 添加删除事件
      tag.querySelector('.remove-filter').addEventListener('click', function() {
        const filter = this.getAttribute('data-filter');
        const resetValue = this.getAttribute('data-reset');
        
        // 重置该筛选条件
        if (filter === 'vote-type' || filter === 'participant-count') {
          currentFilters[filter] = currentFilters[filter].filter(v => v !== resetValue);
          
          // 更新UI
          document.querySelectorAll(`.custom-checkbox[data-filter="${filter}"][data-value="${resetValue}"]`).forEach(cb => {
            cb.classList.remove('checked');
          });
          document.querySelectorAll(`.filter-tag[data-filter="${filter}"][data-value="${resetValue}"]`).forEach(t => {
            t.classList.remove('active');
          });
        } else {
          currentFilters[filter] = resetValue;
          
          // 更新UI
          document.querySelectorAll(`.filter-tag[data-filter="${filter}"]`).forEach(t => {
            t.classList.remove('active');
          });
          document.querySelector(`.filter-tag[data-filter="${filter}"][data-value="${resetValue}"]`).classList.add('active');
        }
        
        applyFilters();
      });
    }
    
    // 重置筛选条件
    function resetFilters() {
      // 重置筛选条件对象
      Object.keys(currentFilters).forEach(key => {
        if (Array.isArray(currentFilters[key])) {
          currentFilters[key] = [];
        } else {
          currentFilters[key] = key === 'sort' ? 'recommend' : 'all';
        }
      });
      
      // 重置UI
      document.querySelectorAll('.filter-tag').forEach(tag => {
        tag.classList.remove('active');
      });
      document.querySelectorAll('.filter-tag[data-value="all"], .filter-tag[data-value="recommend"]').forEach(tag => {
        tag.classList.add('active');
      });
      
      document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
        checkbox.classList.remove('checked');
      });
      
      // 应用筛选
      applyFilters();
    }
    
    // 清除所有筛选条件
    function clearAllFilters() {
      resetFilters();
      searchInput.value = '';
      clearSearchBtn.classList.remove('active');
    }
    
    // 投票功能相关
    function selectOption(option, isMultiple) {
      // 如果是已投票状态，不允许再次选择
      if (option.closest('.vote-options').querySelector('.vote-btn').classList.contains('voted')) {
        return;
      }
      
      // 单选逻辑
      if (!isMultiple) {
        // 清除同组其他选项的选中状态
        const siblings = option.parentElement.querySelectorAll('.option-text, .option-single-img, .option-multi-img');
        siblings.forEach(sib => {
          sib.classList.remove('selected');
          const radio = sib.querySelector('.option-radio');
          if (radio) radio.classList.remove('checked');
        });
        
        // 设置当前选项为选中状态
        option.classList.add('selected');
        const radio = option.querySelector('.option-radio');
        if (radio) radio.classList.add('checked');
      } 
      // 多选逻辑
      else {
        option.classList.toggle('selected');
        
        // 处理复选框状态
        const checkbox = option.querySelector('.option-checkbox') || 
                        (option.classList.contains('option-single-img') ? 
                         option.appendChild(document.createElement('div')) : null);
        
        if (checkbox) {
          checkbox.className = 'option-checkbox';
          checkbox.classList.toggle('checked');
        }
      }
    }
    
    // 提交投票
    function submitVote(btn) {
      const voteOptions = btn.parentElement;
      const selectedOptions = voteOptions.querySelectorAll('.selected, .option-checkbox.checked, .option-radio.checked');
      
      if (selectedOptions.length === 0) {
        alert('请至少选择一个选项');
        return;
      }
      
      // 更改按钮状态
      btn.textContent = '已投票';
      btn.classList.add('voted');
      btn.disabled = true;
      
      // 更新投票项的参与状态
      const voteItem = btn.closest('.vote-item');
      voteItem.setAttribute('data-participation', 'joined');
      
      alert('投票成功！');
    }
    
    // 创建投票
    document.getElementById('createVoteBtn').addEventListener('click', function() {
      alert('跳转到创建投票页面');
    });
    
    // 初始化页面
    applyFilters();
  </script>
</body>
</html>
